<template>
  <div class="recharge other_common">
    <table class="common">
      <tbody>
        <tr>
          <td>充值卡</td>
          <td>充值时间</td>
          <td>金额</td>
          <td>状态</td>
          <td>操作</td>
        </tr>
        <tr>
          <td>
           ----
          </td>
         <td>
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </td>
          <td>
            <input type="text" v-model="money" />
          </td>
          <td>{{used}}</td>
          <td>
            <a @click="Add()">添加</a>
          </td>
        </tr>
        <!-- 追加每一项 -->
          <tr v-for="(person,index) in infoArr" :key="index" >
          <td>{{person.recharge}}</td>
          <td>{{person.item}}</td>
          <td>{{person.money}}</td>
          <td>{{person.used}}</td>
          <td>
            <input type="radio" v-model="person.on"  value="on" />启用
            <i></i>
            |
            <input type="radio" v-model="person.on"  value="off" />禁用
            <i></i>
            |
            <a @click="Delete(index)">删除</a>
          </td>
        </tr>
        <!-- <tr>
          <td class="tableleft" style="width: 30%">账户充值</td>
          <td>
            <input
              type="text"
              placeholder="请输入充值卡密"
              id="rechargeNum"
              style="width: 70%"
            />
          </td>
        </tr>
        <tr>
          <td class="tableleft"></td>
          <td>
            <button class="btn btn-primary rechargeBtn">充值</button>
          </td>
        </tr>-->
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1:'',
      recharge:'10000000',
      money:'100',
      item:'2019-10-9',
      used:'未用',
      off:'',
      on:'',
      infoArr:[]
    };
  },
  methods: {
    Add(){
      let that=this;
      var obj={};
      obj.recharge=that.recharge
      obj.money=that.money;
      obj.item=that.value1;
      obj.used=that.used;
      obj.off=that.off;
      obj.on=that.on;
      that.infoArr.push(obj);
    },
    Delete(index){
      this.infoArr.splice(index,1);
    }
  }
};
</script>

<style>
.recharge {
  padding-top: 20px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  color: #fff;
  background-color: #04c;
  *background-color: #003bb3;
}
.btn:hover,
.btn:focus {
  text-decoration: none;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}
.btn-primary {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-image: linear-gradient(to bottom, #08c, #04c);
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
</style>
